
//  自定义屏幕触摸事件基本使用介绍
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Animated,
    Easing,
    PanResponder,
    TouchableOpacity,
    LayoutAnimation,
    TouchableHighlight,
    ToastAndroid,
    Platform,
    UIManager
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            eventName:'',
            pos: '',
        };
        this.myPanResponder={}  //你自定义的触摸事件集合
    }

    componentWillMount() {
        // 自定义的触摸相应事件要定义在componentWillMount里面
        this.myPanResponder = PanResponder.create({


            // 按击的时候是否要求成为响应者：
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            // 按击事件劫持，是否把事件向子组件传递
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            // 移动的时候是否要成为事件响应者
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            // 移动事件劫持，是否把事件向子组件传递
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            // 当有另一个组件要求成为事件响应者的时候，是否要释放响应者
            onPanResponderTerminationRequest: (evt, gestureState) => true,

            //响应对应事件后的处理:
            onPanResponderGrant: (evt, gestureState) => {
                // 这是直接给state赋值没有用setState方法，其实就是给state赋初始值
                this.state.eventName='触摸开始';
                // 这个方法是哪里定义的？？？？？？？？？？？
                this.forceUpdate();
            },
            onPanResponderMove: (evt, gestureState) => {
                var _pos = 'x:' + gestureState.moveX + ',y:' + gestureState.moveY;
                this.setState( {eventName:'移动',pos : _pos} );
            },
            onPanResponderRelease: (evt, gestureState) => {
                this.setState( {eventName:'抬手'} );
            },
            onPanResponderTerminate: (evt, gestureState) => {
                this.setState( {eventName:'另一个组件已经成为了新的响应者'} )
            },
        });
    }

    render() {
        return (
            <View style={styles.himiViewStyle}
                {...this.myPanResponder.panHandlers}
            >
                <Text style={styles.himiTextStyle}>传智 React Native 教程</Text>
                <View style={styles.container}>
                    <Text style={styles.text}>{this.state.eventName}</Text>
                    <Text style={styles.text}>{this.state.pos}</Text>
                </View>
            </View>

        )}

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    text: {
        color:'#f00',
        fontSize:30,
    },
    himiViewStyle:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    himiTextStyle:{
        color:'#f00',
        fontSize:30,
        marginTop:70,
    },
});